<template>
  <div class="menu-contaienr">

    <!-- logo -->
    <div class="menu_logo">
      <img src="/logo.png" />
    </div>
    <el-scrollbar class="menu-scrollbar-container">
      <div class="menu-container-box" v-if="default_active">
        <!-- 菜单 -->
        <el-menu :default-active="default_active" @select="handleMenuSelect">
          <el-menu-item v-for="item in menu_list" :index="item.index" :key="item.index">
            <div class="mange">
              <div class="mange_icon">
                <img class="icon" :src="default_active == item.index ? item.src_active : item.src" alt="">
              </div>
              <span>{{ item.label }}</span>
            </div>
          </el-menu-item>
        </el-menu>
      </div>
    </el-scrollbar>
    <!-- 底部菜单 -->
    <div class="user-info-container">
      <el-divider></el-divider>
      <div class="user-info">
        <el-avatar src="/avatar.png" :size="48"></el-avatar>
        <el-text>{{ username }}</el-text>

        <el-dropdown trigger="click" @command="handleCommand" placement="top">
          <el-icon color="white" size="20">
            <MoreFilled />
          </el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="update-password">修改密码</el-dropdown-item>
              <el-dropdown-item command="exit">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
  <el-dialog v-model="update_password_modal.show" title="修改密码" width="524px">
    <el-form label-width="132px" ref="update_password_modal_data_ref" :rules="update_password_modal.rules"
      :model="update_password_modal.form_data">
      <el-form-item label="新密码" prop="password">
        <el-input v-model="update_password_modal.form_data.password" type="password" size="large" placeholder="请输入新密码" />
      </el-form-item>
      <el-form-item label="再次输入新密码" prop="password2">
        <el-input v-model="update_password_modal.form_data.password2" type="password" size="large"
          placeholder="再次输入新密码" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="large" style="width:120px" @click="handleUpdatePasword">修改密码</el-button>
        <el-button size="large" @click="update_password_modal.show = false">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <DownloadModal ref="DownloadModalRef" />
</template>

<script  setup>
import { useUserStore } from "@/store/user"
import { useRoute, useRouter } from "vue-router"
import { onMounted, ref, computed } from "vue"
import { UpdatePasswordApi } from "@/api/user"
import { ElMessage } from "element-plus"
import DownloadModal from "@/components/download-modal/index.vue"
import o1 from '@/assets/images/organ1.png'
import o2 from '@/assets/images/organ2.png'
import o3 from '@/assets/images/organ3.png'
import o4 from '@/assets/images/organ4.png'
import o5 from '@/assets/images/organ5.png'
import o6 from '@/assets/images/organ6.png'
import o7 from '@/assets/images/organ7.png'
import o8 from '@/assets/images/organ8.png'
import o1_active1 from '@/assets/images/organ1_active.png'
import o1_active2 from '@/assets/images/organ2_active.png'
import o1_active3 from '@/assets/images/organ3_active.png'
import o1_active4 from '@/assets/images/organ4_active.png'
import o1_active5 from '@/assets/images/organ5_active.png'
import o1_active6 from '@/assets/images/organ6_active.png'
import o1_active7 from '@/assets/images/organ7_active.png'
import o1_active8 from '@/assets/images/organ8_active.png'
const route = useRoute()
const router = useRouter()
const userStore = useUserStore();
const default_active = ref("");
const DownloadModalRef = ref()
// 1级
const organizing = ref([
  { src: o1, src_active: o1_active1, index: 'manage-organizingmation', label: "总负责人信息" },
  { src: o2, src_active: o1_active2, index: 'manage-agentmanagement', label: "组委会管理" },
  { src: o4, src_active: o1_active4, index: 'manage-fenzugroupmanagement', label: "分组管理" },
  { src: o4, src_active: o1_active4, index: 'manage-event_type', label: "赛项类型管理" },
  // event_type
  { src: o3, src_active: o1_active3, index: 'manage-organtionmanagement', label: "机构管理" },
  { src: o8, src_active: o1_active8, index: 'manage-registrationmanagement', label: "报名管理" },
  { src: o5, src_active: o1_active5, index: 'manage-personnelmanagement', label: "人员管理" },
  { src: o6, src_active: o1_active6, index: 'manage-cansaientryreview', label: "参赛审核" },
  { src: o7, src_active: o1_active7, index: 'manage-tongjistatements', label: "统计与报表" },
  { src: o7, src_active: o1_active7, index: 'download', label: "下载专区", type: "modal" },
])
// 2级
const agent = ref([
  { src: o1, src_active: o1_active1, index: 'manage-committee', label: "组委会信息" },
  { src: o2, src_active: o1_active2, index: 'manage-agents', label: "机构管理" },
  { src: o6, src_active: o1_active6, index: 'manage-organization', label: "参赛审核" },
  { src: o7, src_active: o1_active7, index: 'manage-statisticstements', label: "统计与报表" },
  { src: o8, src_active: o1_active8, index: 'manage-IDCodeAcquisition', label: "ID码获取" },
  { src: o7, src_active: o1_active7, index: 'download', label: "下载专区", type: "modal" },

])
// 3级
const institution = ref([
  { src: o1, src_active: o1_active1, index: 'manage-organizationinfo', label: "机构信息" },
  { src: o5, src_active: o1_active5, index: 'manage-personnel', label: "人员管理" },
  { src: o4, src_active: o1_active4, index: 'manage-registration', label: "报名管理" },
  { src: o8, src_active: o1_active8, index: 'manage-IDCodeAcquisition', label: "ID码获取" },
  { src: o7, src_active: o1_active7, index: 'download', label: "下载专区", type: "modal" },

  // { src: o8, src_active: o1_active8, index: 'manage-idassistant', label: "ID码助手" },
])

const tecRouter = ref([
  { src: o1, src_active: o1_active1, index: 'tecinfo', label: "老师信息" },
  { src: o1, src_active: o1_active1, index: 'wait_list', label: "待批阅列表" },
])
const menu_list = computed(() => {
  if (userStore.info_data.role == 'organizing') {
    return organizing.value;
  } else if (userStore.info_data.role == 'agent') {
    return agent.value
  } else if (userStore.info_data.role == 'institution') {
    return institution.value;
  } else if (userStore.info_data.role == 'tec') {
    return tecRouter.value;
  }
})
const update_password_modal_data_ref = ref();
const checkPassword2 = (rule, value, callback) => {
  if (!value) {
    callback(new Error('请输入密码'))
  }

  if (value == update_password_modal.value.form_data.password) {
    callback()
  } else {
    callback(new Error('两次密码不一致'))
  }
}
const update_password_modal = ref({
  show: false,
  form_data: {
    password: "",
    password2: "",
  },
  rules: {
    password: [
      {
        type: 'string',
        required: true,
        message: '请输入密码',
        trigger: 'blur',
      }
    ],
    password2: [
      {
        type: 'string',
        required: true,
        validator: checkPassword2,
        trigger: 'blur',
      }
    ],
  }
})
const handleCommand = (command) => {
  if (command == 'update-password') {
    update_password_modal.value.show = true;
  } else if (command == 'exit') {
    userStore.handleExit();
    router.push({
      path: "/auth/login"
    })
  }
}
const username = computed(() => {
  if (userStore.info_data.role == 'organizing') {
    return "总负责人"
  } else if (userStore.info_data.role == 'agent') {
    return "组委会负责人"
  } else if (userStore.info_data.role == 'institution') {
    return "机构负责人"
  } else if (userStore.info_data.role == 'tec') {
    return "老师"
  }
})

const handleUpdatePasword = () => {
  update_password_modal_data_ref.value.validate(async (r) => {
    if (!r) {
      return;
    }
    let res = await UpdatePasswordApi({
      "password": update_password_modal.value.form_data.password
    })
    if (res.success) {
      ElMessage.success(res.message)
      handleCommand('exit')
    } else {
      ElMessage.error(res.message)
    }
  })

}
/**
 * 菜单选择
 */
const handleMenuSelect = (index) => {
  let find = menu_list.value.find(item => item.index == index)
  if (find) {
    if (find.type == 'modal' && find.index == 'download') {
      DownloadModalRef.value.handleOpenModal()
    } else {
      default_active.value = index
      router.push({
        name: index
      });
    }
  }

}
onMounted(() => {
  if (route.fullPath == '/manage') {
    // 默认三个级别的首次打开
    const map = {
      organizing: "manage-organizingmation",
      agent: "manage-committee",
      institution: "manage-organizationinfo",
      tec: "tecinfo",
    }
    router.push({
      name: map[userStore.info_data.role]
    });
    default_active.value = map[userStore.info_data.role];
  } else {
    // default_active.value = route.fullPath;
    default_active.value = route.meta.index
  }
})
</script>

<style lang="scss" scoped>
.menu-contaienr {
  width: 100%;
  height: 100%;
  // background-image: -webkit-linear-gradient(0deg, #5d5cf8 0, #5754e4 100%);
  // padding-top: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  .el-menu {
    background-color: #ffffff00;
    border-right: solid 0px #e6e6e6;
  }

  .el-menu-item.is-active {
    font-weight: bold;
    color: #05c3de;
    background: #8473f71f;
  }

  .el-menu-item {
    display: flex !important;
    align-items: center !important;
    color: #fff;
    border-radius: 30px 0 0 30px;

    &:hover {
      outline: 0;
      background-color: #0000000d;
      border-radius: 30px 0 0 30px;
    }

    .mange {
      display: flex;
      align-items: center;
      justify-content: center;

      .mange_icon {
        width: 32px;
        height: 32px;
        display: block;
        display: flex;
        align-items: center;

        .icon {
          width: 80%;
          height: 75%;
          color: red;
        }
      }
    }
  }

  .is-active {
    font-size: 22px !important;
    font-weight: 500;
    text-align: center;
    letter-spacing: 0px;
    color: #1e76de !important;
    background-color: #fff !important;
    border-radius: 30px 0 0 30px;
  }

  .menu_logo {
    box-sizing: border-box;
    display: flex;
    // justify-content: center;
    padding: 16px 0 0 18px;

    img {
      height: 55px;
      width: 160px;
    }
  }

  .menu-scrollbar-container {
    height: calc(100% - 64px - 120px);
  }

  .menu-container-box {
    padding-top: 32px;
  }

  .user-info-container {
    box-sizing: border-box;
    padding-right: 24px;
    height: 120px;
    display: flex;
    flex-direction: column;

    .user-info {
      display: flex;
      align-items: center;
      justify-content: center;

      .el-text {
        padding: 0 8px;
        color: white;
      }

      .el-icon {
        cursor: pointer;
      }
    }
  }

  .el-menu-item {
    margin-bottom: 24px;
  }

  .el-menu-item:last-child {
    margin-bottom: 0px;
  }

  .el-menu-item * {
    vertical-align: baseline;
  }
}

span {
  font-size: 14px;
}
</style>